import { BORDER_RADIUS } from "./config";
import { IPos, ISvgOptions, TSvgType } from "./type";

export class SvgBase {

    private _svg: Element = this._$('svg');
    private _mainG: Element = this._$('g');
    private _hoverG: Element = this._$('g');

    constructor(root: HTMLElement, w: number, h: number) {
        root.appendChild(this._svg);
        this._svg.setAttribute('width', w.toString());
        this._svg.setAttribute('height', h.toString());
        this._svg.appendChild(this._mainG);
        this._svg.appendChild(this._hoverG);
    }

    gRect(x: number, y: number, w: number, h: number, options?: ISvgOptions) {
        const ele = this._$('rect');
        const borderRadius = BORDER_RADIUS.toString();
        ele.setAttribute('x', x.toString());
        ele.setAttribute('y', y.toString());
        ele.setAttribute('rx', borderRadius); // 圆角
        ele.setAttribute('ry', borderRadius); // 圆角
        ele.setAttribute('width', w.toString());
        ele.setAttribute('height', h.toString());

        this.setOptions(ele, options);

        this._mainG.appendChild(ele);
        return ele;
    }

    gText(x: number, y: number, text: string, options?: ISvgOptions) {
        const ele = this._$('text');
        ele.setAttribute('x', x.toString());
        ele.setAttribute('y', y.toString());
        ele.textContent = text;

        this.setOptions(ele, options);

        this._mainG.appendChild(ele);
        return ele;
    }

    gLine(x1: number, y1: number, x2: number, y2: number, options?: ISvgOptions) {
        const ele = this._$('line');
        ele.setAttribute('x1', x1.toString());
        ele.setAttribute('y1', y1.toString());
        ele.setAttribute('x2', x2.toString());
        ele.setAttribute('y2', y2.toString());

        this.setOptions(ele, options);

        this._mainG.appendChild(ele);
        return ele;
    }
    gPolyLine(posArray: IPos[], options?: ISvgOptions) {
        if (posArray.length < 2) {
            return;
        }
        const ele = this._$('polyline');
        const points = posArray.map(p => `${p.x},${p.y}`).join(' ');
        ele.setAttribute('points', points);
        this.setOptions(ele, options);
        this._mainG.appendChild(ele);
        return ele;
    }
    gPolygon(posArray: IPos[], options?: ISvgOptions, hover?: boolean) {
        if (posArray.length < 3) {
            return;
        }
        const ele = this._$('polygon');
        const points = posArray.map(p => `${p.x},${p.y}`).join(' ');
        ele.setAttribute('points', points);
        this.setOptions(ele, options);
        if (hover) { 
            this._hoverG.appendChild(ele);
        } else {
            this._mainG.appendChild(ele);
        }
        return ele;
    }

    setOptions(el: Element, options?: ISvgOptions) {
        if (!options) return;

        if (options.stroke) {
            options.fill = 'transparent'; // 如果有描边颜色，则填充颜色设置为透明
        }

        if (options.fill) {
            el.setAttribute('fill', options.fill);
        }
        if (options.stroke) {
            el.setAttribute('stroke', options.stroke);
        }
        if (options.strokeWidth) {
            el.setAttribute('stroke-width', options.strokeWidth.toString());
        }
        if (options.opacity) {
            el.setAttribute('opacity', options.opacity.toString());
        }
        if (options.id) {
            el.setAttribute('id', options.id);
        }
    }

    get svg() {
        return this._svg;
    }

    // 创建SVG元素
    private _$(t: TSvgType) {
        return document.createElementNS("http://www.w3.org/2000/svg", t);
    }
    public resize(w: number, h: number) {
        if (this._svg) {
            this._svg.setAttribute('width', String(w));
            this._svg.setAttribute('height', String(h));
        }
    }
}